<!DOCTYPE html PUBLIC "-//W3C//DTD XHMTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="uft-8"/>
<title>节目时钟</title>
</head>
<body>
<center> <canvas id="drawing" width="600" height="600" sytle="border:#000000 solid 1px">program clock</canvas></center>
<script>
    var min;
    var hour;
    var second;
    var offset =0;
    var drawing=document.getElementById("drawing");
	var context=drawing.getContext("2d");
	console.log("drawing's width is"+drawing.width);

	
    function drawClock(ctxt){
        
        if(drawing.getContext){
		    ctxt.strokeStyle="#000000";
			console.log("in drawClock,before draw arc"+context.strokeStyle);
            ctxt.beginPath(); 
		    ctxt.arc(300,300,299,0,2*Math.PI,false);
            ctxt.stroke();
			ctxt.closePath();
			
			ctxt.beginPath();
//ctxt.moveTo(290,300);
	        ctxt.arc(300,300,290,0,2*Math.PI,false);
            ctxt.stroke();
            ctxt.closePath();     
			
			for(var i=0; i<12; i++) {
               ctxt.save();
               ctxt.lineWidth = 7;
               ctxt.strokeStyle = "#000";
               ctxt.translate(300,300);
               ctxt.rotate(i*30*Math.PI/180);
               ctxt.beginPath();
               ctxt.moveTo(0,-270);
               ctxt.lineTo(0,-300);
               ctxt.stroke();
               ctxt.closePath();
               ctxt.restore();
            }
            // 时刻度结束

            // 分刻度开始
            for(var i=0; i<60; i++) {
               ctxt.save();
               ctxt.lineWidth = 5;
               ctxt.strokeStyle = "#000";
               ctxt.translate(300,300);
               ctxt.rotate(i*6*Math.PI/180);
               ctxt.beginPath();
               ctxt.moveTo(0,-290);
               ctxt.lineTo(0,-300);
               ctxt.stroke();
               ctxt.closePath();
               ctxt.restore();
            }
			
			
			
			
			

		        ctxt.translate(300,300);

		        ctxt.font="bold 20px Arial";
		        ctxt.textAlign="center";
		        ctxt.textBaseline ="middle";
		        ctxt.fillText("12",0,-250);

           ctxt.stroke();
		   ctxt.closePath();

        } 		   
	}
  drawClock(context);
  var stop = setInterval("clock(context)",1000);
  //setTimeout("clock(context)",1000);
  
  function clearPreviousSecMinHour(ctxt,min,hour,second){
      ctxt.clearRect(0,0,600,600);
  }


 //  function drawMobilePhone(context,leftBottomX,leftBottomY){
    function drawMobilePhone(ctxt,leftBottomX,leftBottomY){ 

      var mobileWidth =  40;
      var mobileHeight = 80;
      ctxt.beginPath();
      ctxt.moveTo(leftBottomX,leftBottomY); 
	  ctxt.strokeStyle = "#000000"
	  console.log("in clock 5"+context.strokeStyle);
      ctxt.strokeRect(leftBottomX,leftBottomY,leftBottomX+mobileWidth,leftBottomY-mobileHeight);
	  ctxt.font="bold 20px Arial";
      ctxt.textAlign="center";
	  ctxt.textBaseline ="middle";
	  ctxt.fillText("请关闭手机和Wifi",leftBottomX+mobileWidth/2,leftBottomY-mobileHeight/2);
      ctxt.fillText("或调至静音和振动状态",leftBottomX+mobileWid/2,leftBottomY-mobileHeight/3); 
	  ctxt.stroke();
	  ctxt.closePath();
   }

    function drawSecond(ctxt,secd){
	   ctxt.beginPath();
	   ctxt.moveTo(0,0);
       ctxt.strokeStyle="#ff0000";
	   console.log("in clock 2"+context.strokeStyle);
       ctxt.lineTo(230*Math.sin(2*Math.PI*secd*6/360),-230*Math.cos(2*Math.PI*secd*6/360));
       ctxt.stroke();
	   ctxt.closePath();
	}

	function clock(ctxt){

        ctxt.translate(-300,-300);
        clearPreviousSecMinHour(ctxt,min,hour,second);
	    console.log("in clock 1:"+ctxt.strokeStyle);
        drawClock(ctxt);

  	    var d = new Date();
        min = d.getMinutes();
  	    hour = d.getHours();
        second = d.getSeconds();
        
	    drawSecond(context,second);	
          
		  
	    ctxt.beginPath();   
  	    ctxt.moveTo(0,0);
        ctxt.strokeStyle="#000000";
	    console.log("in clock 3"+context.strokeStyle);
        ctxt.lineTo(180*Math.sin(2*Math.PI*min*6/360),-180*Math.cos(2*Math.PI*min*6/360));
        ctxt.stroke();
	    ctxt.closePath();

        //draw Hour line
		console.log(d.getHours());
	    ctxt.beginPath();
        ctxt.moveTo(0,0);
        ctxt.strokeStyle="#000000";
	    console.log("in clock 4"+context.strokeStyle);
        ctxt.lineTo(100*Math.sin(2*Math.PI*(hour*30+min*30/60)/360),-100*Math.cos(2*Math.PI*(hour*30+min*30/60)/360));
        ctxt.stroke();
        ctxt.closePath();  

        if( min === 25 ) {
            if(offset < 55 ) {
                offset = second;
                drawMobilePhone(context,-5+offset*120/55,5-offset*120/55);
            }
            if( offset > 55 ) {
                offset =55;
            }
	    }	 
          
		  
        <!-- if( min === 22 &&　hour === 15 ) { -->
		    <!-- clearInterval(stop); -->
    		<!-- ctxt.translate(-400,-400); -->
  	        <!-- clearPreviousSecMinHour(context,min,hour,second); -->
            <!-- ctxt.font="bold 60px Arial"; -->
            <!-- <!-- ctxt.textAlign="center"; --> -->
            <!-- ctxt.textBaseline ="middle"; -->
	        <!-- ctxt.fillText("聚会开始",400,400); -->
	        <!-- ctxt.stroke(); -->
		<!-- }  -->
	}

</script>
</body>
</html>
